html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
.container { padding: 50px 0; position:absolute; top:0; bottom:0; left:0; right:0; overflow: hidden; }
.wrapper, #login { height: 100%; width: 100%; overflow: visible; }
#login { background: linear-gradient(#fff 0%, rgba(255,255,255,0) 80%), #eaebec; padding-top: 100px; }
#login form {
	display: inline-block;
	float: left;
	margin-left: 200px;
}
#login input, #login select {
	display: block;
	font-family: "Helvetica Neue", helvetica, sans-serif;
	padding: 8px 12px;
	margin-bottom: 20px;
	width: 166px;
	font-size: 15px;
	color: #404245;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	background-color: rgba(0,0,0,0.12);
	border: none;
	-moz-box-shadow: rgba(255,255,255,0.9) 0px 1px 1px,inset rgba(0,0,0,0.34) 0px 1px 3px,inset rgba(0,0,0,0.2) 0px 0 1px;
	-webkit-box-shadow: rgba(255,255,255,0.9) 0px 1px 1px,inset rgba(0,0,0,0.34) 0px 1px 3px,inset rgba(0,0,0,0.2) 0px 0 1px;
	-o-box-shadow: rgba(255,255,255,0.9) 0px 1px 1px,inset rgba(0,0,0,0.34) 0px 1px 3px,inset rgba(0,0,0,0.2) 0px 0 1px;
	box-shadow: rgba(255,255,255,0.9) 0px 1px 1px,inset rgba(0,0,0,0.34) 0px 1px 3px,inset rgba(0,0,0,0.2) 0px 0 1px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}
#login select { width: 190px; }
#avatar-selector { display: inline-block; margin-left: 75px; float: left; }
#avatar-selector h3 { margin: 0; }
#login form .avatar { float: right; }
#login form button { border: 1px solid #999; padding: 5px 10px; color: #999; text-shadow: 0 1px 0 #fff; border-radius: 5px; background-color: transparent; cursor: pointer; }
#login form button:hover { color: #555; background-color: rgba(0,0,0,.05); }
.avatars {
	max-width: 260px;
	max-height: 220px;
	box-shadow: 0 0 5px #000 inset;
	padding: 5px;
	border-radius: 4px;
	overflow-y: auto;
 }
.avatar { width: 30px; height: 30px; display: inline-block; margin: 5px; }
.avatars .avatar:hover {
	cursor: pointer;
	box-shadow: 0 0 3px #000;
	border-radius: 4px;
}
header { height: 50px; margin-top: -50px; border-bottom: 1px solid #1E70a8;
	background: #3E90C8;
	background: linear-gradient(to bottom, #4Ea0d8 0%, #3E90C8 100%);
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	font-weight: bold;
	color: #eee;
	font-family: sans-serif;
	text-shadow: 0 1px 0 #000;
}
#left-nav { position: fixed; padding-top: 10px; width: 200px; left: 0; background-color: #423c44; height: 100%; color: #fff; }
#chat-area { margin-left: 200px; height: 100%; position: relative; }
#chat-box { height: 100%; overflow: auto; }
#input-box { position: absolute; bottom: -50px; width: 100%; border-top: 1px solid #ccc; height: 50px; }
#input-box textarea { outline: 0; border-width: 0; resize: none; font-size: 16px; width: 80%; margin: 0 0 0 5%; height: 48px; padding: 2px 0 0; display: inline-block; }
#input-box .buttons { position: absolute; right: 0; top: 0; width: 10%; }
#input-box button { border: 0; background-color: #3E90C8; color: #fff; line-height: 50px; margin: 0; width: 50%; padding: 0; cursor: pointer; float: left; }
#input-box button[type="button"] { background-color: #555; }
#current-user { line-height: 40px; background-color: #323232; border: 1px solid #262626; border-width: 1px 0 1px 0; padding-left: 15px; position: relative; margin-bottom: 10px; }
#current-user .avatar { position: absolute; right: 5px; top: 0; }
.user-list { line-height: 40px; padding-left: 55px; position: relative; cursor: pointer; }
.user-list:hover { background-color: rgba(255,255,255,.2); }
.user-list .avatar { position: absolute; left: 5px; }
.chat { position: relative; background-color: #fff; padding: 5px 25px; border-bottom: 1px solid #ccc; min-height: 43px; }
.chat>div { position: absolute; left: 15px; top: 5px; text-align: center; color: #888; width: 40px; }
.chat .avatar, .mychat .avatar { margin: 0 auto; display: block; }
.chat pre { margin-left: 100px; color: #777; }
.mychat { position: relative; background-color: #fafafa; padding: 5px 25px 5px 50px; border-bottom: 1px solid #ccc; min-height: 43px; }
.mychat>div { position: absolute; right: 35px; top: 5px; text-align: center; color: #888; }
.mychat pre { margin-right: 80px; color: #777; }
.join, .leave { position: relative; line-height: 30px; background-color: rgba(62, 144, 200, .2); padding: 5px 15px 5px 70px; margin: 0; border-bottom: 1px solid #ccc; color: #777; text-shadow: 0 -1px 0 #fff; }
.join .avatar, .leave .avatar { margin: 0; position: absolute; left: 20px; }
.leave { background-color: #fee; }
.mychat .time, .chat .time, .join .time, .leave .time { color: #ccc; font-size: 10px; position: absolute; bottom: -10px; right: 10px; text-shadow: none; }
.join .time, .leave .time { bottom: -19px; }
.mychat .time { left: 10px; }